<template>
	<view>
		<!-- 分红金额显示 -->
		<view class="bouns_box">
			<text class="tit">当前分红余额：</text>
			<text class="money">￥{{dividend_val}}</text>
		</view>
		
		<!-- 分红明细的显示 -->
		<view class="bouns_detail">
			<view class="title">
				分红记录
			</view>
			<view class="detail" v-for="(item,index) in detail" :key="index" v-if="detail.length > 0">
				<view class="detail_box">
					<text>{{item.type.type_name}}</text>
					<text class="time">{{item.addtime}}</text>
				</view>
				<text class="num" v-if="item.type.type_val == 1" style="color: crimson;">+{{ item.dividend_val }}</text>
				<text class="num" v-else style="color: cadetblue;">-{{ item.dividend_val }}</text>
			</view>
			
			
			<view class="no_box" v-if="detail.length == 0">
				<image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/f9bede86ecf6777ae86c83afe8c3747d9693e80f.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				dividend_val: '',
				detail: '',
				page: 1,
				totalPage: 1
			};
		},
		onLoad() {
			this.getUserInfo()
			this.money_detail()
		},
		methods:{
			
			// 下拉加载
			onReachBottom() {
				let that = this;
				if (that.page < that.totalPage) {
					that.page++;
					that.money_detail()
				} else {
					return;
				}
			},
			
			
			/* 获取用户信息 */
			getUserInfo(){
				let that = this;
				app.globalRequest({
					api: app.getApi().user.getUserInfo,
				}).then(res => {
					if (res.code == 1) {
						let userInfo = res.data.uInfo;
						that.dividend_val = userInfo.dividend_val;
					}
				}).catch(err => {
				
				})
			},
			
			// 分红明细
			money_detail(){
				let that = this;
				app.globalRequest({
					api: app.getApi().user.dividendValLog,
				}).then(res => {
					if (res.code == 0) {
						var  detail_lists = res.data.data
						that.totalPage = res.totalPage
						if( that.page == 1 ){
							that.detail =  res.data.data
						}else{
							that.detail = that.detail.concat(detail_lists);
						} 
					}
				}).catch(err => {
				
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #F5F5F5;
	}
	.bouns_box{
		display: flex;
		flex-direction: column;
		padding: 30rpx 30rpx 10rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: linear-gradient(124deg, #FE7265 0%, #FEDD67 100%);
		.tit{
			font-size: 25rpx;
			color: #fff;
		}
		.money{
			font-size: 57rpx;
			font-weight: bold;
			color: #fff;
			margin-top: 15rpx;
		}
	}
	.bouns_detail{
		width: 100%;
		background-color: #fff;
		margin-top: 24rpx;
		padding: 40rpx 32rpx 20rpx;
		box-sizing: border-box;
		.title{
			font-size: 29rpx;
			color: #333333;
			font-weight: bold;
			padding-bottom: 40rpx;
			box-sizing: border-box;
		}
		.detail{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0 ;
			box-sizing: border-box;
			border-top: 2rpx solid #EEEEEE;
			.detail_box{
				display: flex;
				flex-direction: column;
				text{
					color: #111111;
					font-size: 29rpx;	
					font-weight: bold;
				}
				.time{
					font-size: 29rpx;
					color: #999999;
					font-weight: normal;
					margin-top: 10rpx;
				}
			}
			.num{
				color: #EC1818;
				font-weight: bold;
				font-size: 29rpx;
			}
		}
	}
	
	.no_box{
		width: 520rpx;
		height: 430rpx;
		margin: 200rpx auto;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>
